<template>
  <div id="home">
    <!-- 骨架屏幕  数据未加载时显示占位-->
    <Skeleton v-show="isShowLoading" />
    <div v-if="!isShowLoading">
      <!-- 头部地理位置和搜索框 -->
      <div class="head">
        <Header></Header>
        <!-- 轮播图 -->
        <Sowing :sowing_list="sowing_list" />
        <!-- tip -->
        <Tip :home_ad="home_ad" />
      </div>
      <!-- Nav -->
      <Nav :nav_list="nav_list" />
      <!-- 跳转到会员界面 -->
      <VipTip></VipTip>
      <!-- 限时抢购 -->
      <FlashBuy
        v-if="flash_sale_product_list.length > 0"
        :flash_sale_product_list="flash_sale_product_list"
      />
      <!-- 特色专区 -->
      <SpecialZone :specialZone="specialZone" />

      <!--TabbarItem 商品 -->
      <TabbarGoodsItem
        :tabbar_all_product_list="tabbar_all_product_list"
        :flash_sale_product_list="flash_sale_product_list"
      />
    </div>
  </div>
</template>

<script>
import { getHomeData } from "./../../serve/api/index.js";
// 引入页面组件
import Header from "./components/header/Header";
import Skeleton from "../home/components/skeleton";
import Sowing from "./components/sowing/Sowing";
import Tip from "./components/tip/Tip";
import Nav from "./components/nav/Nav";
import VipTip from "./components/myVip/VipTip";
import FlashBuy from "./components/flash/FlashBuy";
import SpecialZone from "./components/special/SpecialZone";
import TabbarGoodsItem from "./components/tabbar/TabbarGoodsItem";
export default {
  props: {},
  data() {
    return {
      isShowLoading: false,
      nav_list: [],
      sowing_list: [], // 首页轮播图数据
      flash_sale_product_list: [], // 限时抢购
      home_ad: "", // 首页广告
      specialZone: {}, // 特色专区数据
      tabbar_all_product_list: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    this._initData();
  },
  watch: {},
  methods: {
    // 数据初始化
    async _initData() {
      const response = await getHomeData();
      if (response.success) {
        const data = response.data;
        // 给轮播组件 sowing_list赋值
        this.sowing_list = data.list[0].icon_list;
        // 给限时抢购赋值
        this.flash_sale_product_list = data.list[3].product_list;
        // 获取首页广告图
        this.home_ad = data.home_ad.image_url;
        // navList 赋值
        this.nav_list = data.list[2].icon_list;
        // 给特色专区赋值
        this.specialZone = data.special_zone;
        // 给Tabbar 商品列表赋值
        this.tabbar_all_product_list = data.list[12].product_list;
      }
    },
  },
  components: {
    Skeleton,
    Header,
    Sowing,
    Tip,
    Nav,
    VipTip,
    FlashBuy,
    SpecialZone,
    TabbarGoodsItem,
  },
};
</script>

<style lang="less" scoped>
#home {
  background-color: "#f5f5f5";
  padding-bottom: 3rem;
  .head {
    margin-top: -3rem;
    width: 100%;
    background-image: url("http://518taole.7-orange.cn/backImage.png");
  }
}
</style>
